<template>
  <div>
    <!-- SKU列表 -->
    <el-dialog
      width="900px"
      title="SKU列表"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-row style="margin-bottom: 10px"> </el-row>
      <el-table   ref="TableRef"  :data="tableData">
        <!-- sku hs编码 -->
        <!-- sku -->
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="skuNo"
          :label="$t('sku编号')"
          :show-overflow-tooltip="true"
          width="100"
          fixed="left"
        >
          <template slot-scope="scope">
            <div
              @click="handleEdits(scope.row)"
              style="cursor: pointer; color: #1890ff"
            >
              {{ scope.row.skuNo }}
            </div>
          </template>
        </el-table-column>
        <!-- hs编码 -->
        <el-table-column
          show-overflow-tooltip
          align="center"
          label="hs编码"
          prop="hsCode"
        />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="getList" ref="Skucontmoduler"></Skucontmoduler>
  </div>
</template>

<script>
import { getSkuByHsCode } from "@/api/basicSetting/hsCodeRate";
import Skucontmoduler from "@/components/Skucontmoduler";

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: { Skucontmoduler },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      form: {},
      // 表单校验
      rules: {
        // distrId: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    };
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList();
      }
    },
  },
  methods: {
    handleEdits(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row);
      this.$refs.Skucontmoduler.checkNumber("packingInformation");
    },
    getList() {
      getSkuByHsCode({
        ...this.queryParams,
        hsCode: this.formData.hsCode,
      }).then((res) => {
        const { code, total, rows } = res;
        if (code === 200) {
          this.tableData = rows;
          this.total = total;
        }
      });
    },

    handleSubmit() {},
    cancel() {
      this.$emit("update:show", false);
    },
  },
};
</script>
<style scoped lang="scss"></style>
